import "./PayItem.css"
import { Button, Space, Table, Switch } from "antd";
import type { TableProps } from 'antd'
import { useEffect, useState } from "react";
import PayItemMock from "@/mock/PayItemMock";


export default function PayItem() {
  interface DataType {
    _id: string;
    getGain: string; // 收费项目
    chargeMode: string; // 计费方式
    unitPrice: number; // 单价
    precision: string; // 精确度
    calculationFormula: string; // 计算公式
    overdueFineRadio: number; // 滞纳金比例
    payItemState: boolean; // 收费项目状态
  }

  const [data, setData] = useState<DataType[]>([])
  const [pagesize, setPagesize] = useState(5)

  useEffect(() => {
    setData(PayItemMock)
  })

  // 表格-列
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '收费项目',
      dataIndex: 'getGain',
      key: 'getGain',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '计费方式',
      dataIndex: 'chargeMode',
      key: 'chargeMode',
      render: (text) => <span>{text}</span>
    },
    {
      title: '单价',
      dataIndex: 'unitPrice',
      key: 'unitPrice',
      render: (text) => <span>{text.toFixed(1)}元/度</span>
    },
    {
      title: '精确度',
      dataIndex: 'precision',
      key: 'precision',
      render: (text) => <span>{text}</span>
    },
    {
      title: '计算公式',
      dataIndex: 'calculationFormula',
      key: 'calculationFormula',
      render: (text) => <span>{text}</span>
    },
    {
      title: '滞纳金比例',
      dataIndex: 'overdueFineRadio',
      key: 'overdueFineRadio',
      render: (text) => <span>{text}%</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <span><Switch defaultValue={record.payItemState} onChange={(checked) => onChange(checked, record._id)} /></span>
        </Space>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { console.log(record) }}>编辑</a>
          <a onClick={() => { console.log(record) }}>删除</a>
        </Space>
      ),
    },
  ];

  // 选中数据的回调函数
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  };

  const onChange = (checked: boolean, _id: string) => {
    console.log(`Switch changed for ID: ${_id}, New State: ${checked}`);
  }

  return (
    <div className="Bill">
      <div className="Bill-header">
        <span>项目列表</span>
        <div>
          <Button className="Bill-header-btn" type="primary">+ 新建</Button>
          <Button className="Bill-header-btn">批量操作</Button>
        </div>
      </div>
      <div className="Bill-content">
        <Table<DataType>
          rowSelection={{ type: 'checkbox', onChange: onSelectChange }}
          columns={columns}
          dataSource={data}
          rowKey="_id"
          pagination={{
            position: ["bottomCenter"], // 分页器显示在底部
            pageSize: pagesize,        // 每页显示 5 条数据
            total: data.length, // 总数据条数
            showSizeChanger: true, // 允许用户改变每页显示的条数
            pageSizeOptions: [3, 5, 7, 9], // 每页显示条数的选项
            onShowSizeChange: (current, pageSize) => {  //  页码回调函数
              setPagesize(pageSize)
            }
          }} />
      </div>
    </div>
  )
}
